import { Meta } from '@storybook/addon-docs'
import Swatch from '../util/Swatch'
import SwatchGroup from '../util/SwatchGroup'

<Meta title="Getting Started/Colors" />

# Colors

<SwatchGroup heading="Neutral" description="These are the base white and black colors">
    <Swatch color="White" className="bg-white" />
    <Swatch color="Black" className="bg-black" />
</SwatchGroup>

<SwatchGroup
    heading="Grays"
    description="For the dark theme there is a wider range of dark grays. Most things within the UI – text, input fields, backgrounds and dividers are usually gray."
>
    <Swatch color="Gray 25" className="bg-gray-25" />
    <Swatch color="Gray 50" className="bg-gray-50" />
    <Swatch color="Gray 100" className="bg-gray-100" />
    <Swatch color="Gray 200" className="bg-gray-200" />
    <Swatch color="Gray 300" className="bg-gray-300" />
    <Swatch color="Gray 400" className="bg-gray-400" />
    <Swatch color="Gray 500" className="bg-gray-500" />
    <Swatch color="Gray 600" className="bg-gray-600" />
    <Swatch color="Gray 700" className="bg-gray-700" />
    <Swatch color="Gray 800" className="bg-gray-800" />
</SwatchGroup>

<SwatchGroup
    heading="Primary"
    description="This is the primary brand color used for buttons, links and inputs. The darker variant should be used to reach an AA+ contrast ratio."
>
    <Swatch color="Cyan 50" className="bg-cyan-50" />
    <Swatch color="Cyan 300" className="bg-cyan-300" />
    <Swatch color="Cyan 400" className="bg-cyan-500" />
    <Swatch color="Cyan 500" className="bg-cyan-500" />
</SwatchGroup>

<SwatchGroup
    heading="Error"
    description="This is the color used to communicate destructive or negative actions as well as error states."
>
    <Swatch color="Red 50" className="bg-red-50" />
    <Swatch color="Red 300" className="bg-red-300" />
    <Swatch color="Red 400" className="bg-red-400" />
    <Swatch color="Red 500" className="bg-red-500" />
</SwatchGroup>

<SwatchGroup
    heading="Success"
    description="This is the color used to communicate successful or positive actions as well as success states."
>
    <Swatch color="Teal 50" className="bg-teal-50" />
    <Swatch color="Teal 300" className="bg-teal-300" />
    <Swatch color="Teal 400" className="bg-teal-400" />
    <Swatch color="Teal 500" className="bg-teal-500" />
</SwatchGroup>

<SwatchGroup
    heading="Warning"
    description="This is the color used to communicate a warning state, which is mainly used to draw a user’s attention."
>
    <Swatch color="Yellow 50" className="bg-yellow-50" />
    <Swatch color="Yellow 300" className="bg-yellow-300" />
    <Swatch color="Yellow 400" className="bg-yellow-400" />
    <Swatch color="Yellow 500" className="bg-yellow-500" />
</SwatchGroup>

<SwatchGroup heading="Blue">
    <Swatch color="Blue 50" className="bg-blue-50" />
    <Swatch color="Blue 300" className="bg-blue-300" />
    <Swatch color="Blue 400" className="bg-blue-400" />
    <Swatch color="Blue 500" className="bg-blue-500" />
</SwatchGroup>

<SwatchGroup heading="Orange">
    <Swatch color="Orange 50" className="bg-orange-50" />
    <Swatch color="Orange 300" className="bg-orange-300" />
    <Swatch color="Orange 400" className="bg-orange-400" />
    <Swatch color="Orange 500" className="bg-orange-500" />
</SwatchGroup>

<SwatchGroup heading="Pink">
    <Swatch color="Pink 50" className="bg-pink-50" />
    <Swatch color="Pink 300" className="bg-pink-300" />
    <Swatch color="Pink 400" className="bg-pink-400" />
    <Swatch color="Pink 500" className="bg-pink-500" />
</SwatchGroup>

<SwatchGroup heading="Grape">
    <Swatch color="Grape 50" className="bg-grape-50" />
    <Swatch color="Grape 300" className="bg-grape-300" />
    <Swatch color="Grape 400" className="bg-grape-400" />
    <Swatch color="Grape 500" className="bg-grape-500" />
</SwatchGroup>

<SwatchGroup heading="Indigo">
    <Swatch color="Indigo 50" className="bg-indigo-50" />
    <Swatch color="Indigo 300" className="bg-indigo-300" />
    <Swatch color="Indigo 400" className="bg-indigo-400" />
    <Swatch color="Indigo 500" className="bg-indigo-500" />
</SwatchGroup>

<SwatchGroup heading="Green">
    <Swatch color="Green 50" className="bg-green-50" />
    <Swatch color="Green 300" className="bg-green-300" />
    <Swatch color="Green 400" className="bg-green-400" />
    <Swatch color="Green 500" className="bg-green-500" />
</SwatchGroup>
